<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="zh-CN">

<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
  <title>课程教学平台</title>
  <!-- Icons-->
  <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  <!-- Main styles for this application-->
  <link href="css/style.css" rel="stylesheet">
  <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
  <script type="text/javascript">
    var code; //在全局定义验证码   
    //产生验证码   
    window.onload = function () {
      createCode();
    }

    function createCode() {
      code = "";
      var codeLength = 4; //验证码的长度   
      var checkCode = document.getElementById("checkCode");
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数   
      for (var i = 0; i < codeLength; i++) { //循环操作   
        var charIndex = Math.floor(Math.random() * 36); //取得随机数的索引   
        code += random[charIndex]; //根据索引取得随机数加到code上   
      }
      checkCode.value = code; //把code值赋给验证码 
    }

    //校验验证码   
    function validate() {
      var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写         
      if (inputCode.length <= 0) { //若输入的验证码长度为0   
        $('#kongModal').modal('show'); //则弹出请输入验证码   
      } else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时   
        $('#codeModal').modal('show');//则弹出验证码输入错误   
        //createCode(); //刷新验证码   
      } else { //输入正确时   
        alert("^-^"); //弹出^-^   
      }
    }
    //校验   
    //function validate() {
    //var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
    //var inputName = document.getElementById("username");
    //var inputPassword = document.getElementById("password");

    //if ((inputCode.length <= 0) || (inputName.length <= 0) || (inputPassword.length <= 0)) {
    // $('#kongModal').modal('show');

    //}
    //if (inputCode != code) { //若输入的验证码与产生的验证码不一致时   
    //$('#codeModal').modal('show');
    //}



    // }
    function off() {
      $('#successModal').modal('hide');
      //$('#codeModal').modal('hide');
      $('#kongModal').modal('hide');
    }
  </script>
  <style type="text/css">
    .code {
      font-family: Arial;
      font-style: italic;
      font-weight: bold;
      border: 0;
      letter-spacing: 3px;
      color: blue;
    }
  </style>
</head>

<body class="app flex-row align-items-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card-group">
          <div class="card p-4">
            <div class="card-body">
              <form action="" method="POST">
                <h1 class="text-center">课程教学平台</h1>
                <p class="text-muted text-center">请输入账号和密码进行登陆</p>
                <div class="input-group mb-3">
                  <div class="input-group-prepend  col-md-3">
                    <span class="input-group-text">
                      <i class="fa fa-user"></i>
                    </span>
                  </div>
                  <input class="form-control col-md-8" id="username" type="text" name="username" placeholder="账号"
                    autofocus required>
                </div>
                <div class="input-group mb-3">
                  <div class="input-group-prepend col-md-3">
                    <span class="input-group-text">
                      <i class="fa fa-lock"></i>
                    </span>
                  </div>
                  <input class="form-control col-md-8" id="password" type="password" name="password" placeholder="密码"
                    required>
                </div>
                <div class="input-group mb-3">
                  <div class="input-group-prepend col-md-3">
                    <span class="input-group-text">
                      <i class="fa fa-pencil" aria-hidden="true"></i>
                    </span>
                  </div>
                  <input class="form-control col-md-4" id="input" type="text" name="yzm" placeholder="验证码" required>
                  <input type="button" id="checkCode" class="code" onclick="createCode()" />
                  <a href="#" onclick="createCode()" class="center">看不清楚换一张</a><br>
                </div>
                <div class="input-group mb-3">
                  <legend class="col-form-label col-sm-6 pt-0">请选择你的身份：</legend>
                  <div class="col-sm-6">
                    <div class="form-check" aria-required="true">
                      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option1"
                        checked>
                      <label class="form-check-label" for="gridRadios3">
                        学生
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                      <label class="form-check-label" for="gridRadios2">
                        教师
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option2">
                      <label class="form-check-label" for="gridRadios1">
                        管理员
                      </label>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-2">
                  </div>
                  <div class="col-5">
                    <button class="btn btn-primary px-4" type="submit" onclick="validate()">登陆</button>
                  </div>
                  <div class="col-5">
                    <button class="btn btn-link px-0" type="button">忘记密码?</button>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
            <div style="padding:20px 50px 70px"></div>
            <div class="card-body text-center">
              <div class="center">

                <h2>注册</h2>
                <p>课程学习平台，为教与学服务！！！</p>
                <a href="register.html" class="btn btn-primary active mt-3">现在注册!</a>
              </div>
            </div>

          </div>

          <!-- Modal校验用户名失败-->
          <div class="modal fade show" id="usernameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-success" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">登录失败</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>用户名错误!</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success" type="button" onclick="off()">确定</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal校验密码失败-->
          <div class="modal fade show" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-success" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">登录失败</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>密码错误!</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success" type="button" onclick="off()">确定</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal校验验证码失败-->
          <div class="modal fade show" id="codeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-success" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">登录失败</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>验证码错误!</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success" type="button" onclick="off()">确定</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal校验是否为空-->
          <div class="modal fade show" id="kongModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-success" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">失败</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>用户名、密码、验证码都不能为空!!!</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success" type="button" onclick="off()">确定</button>
                </div>
              </div>
            </div>
          </div>

          <!-- Moda校验成功 -->
          <div class="modal fade show" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-success" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">成功</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>登录成功!</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success" type="button" onclick="off()">确定</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- CoreUI and necessary plugins-->
  <script src="vendors/jquery/js/jquery.min.js"></script>
  <script src="vendors/popper.js/js/popper.min.js"></script>
  <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendors/pace-progress/js/pace.min.js"></script>
  <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
  <script src="js/main.js"></script>
  <script src="vendors/mock/mock-min.js"></script>
  <script src="vendors/vue/vue.js"></script>

</body>

</html>